<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>边框阴影</title>
		<style type="text/css">
			.box{
				width: 240px;
				position: relative;
                box-shadow: 10px 10px 0 0 rgba(0,0,0,0.2);			
            }
            .text{
            	width: 240px;
            	height: 60px;
            	font-size: 20px;
            	background-color: #666;
            	color: #FFF;
            	font-family: "微软雅黑";
            	text-align: center;
                overflow: hidden;
                position: absolute;   
                left: 0px; 
                bottom: 0px;
                -o-transition: height 2s;
                -moz-transition: height 2s;        	
                -webkit-transition: height 2s; 
                transition: height 2s;        	
            }
            /*.box .text{
            	display: none;
            }*/
            .box:hover .text{
            	display: block;
            	height: 85px;
            }
		</style>
	</head>
	<body>
		<div class="box">
			<a href="">
				<img src="img/pro2.jpg">
				<div class="text">
					<h3>三雄极光照明有限公司</h3>
				</div>
			</a>
		</div>
	</body>
</html>
